{% extends 'base/base.html' %}

<!-- 加载主页面内存 -->
{% block main_content %}

<div class="card card-default">
    <div class="card-header">
        <h3 class="card-title"> MySQL管理 / 集群管理1 </h3>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-12">
                <div id="toolbar" class="row">
                    <div class="btn-group" style="width: 400px;padding-left: 7.5px;">
                        <button type="button" class="btn btn-success " style="width: 80px;" onclick="btn_add()">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
                        </button>
                        <button type="button" class="btn btn-info btn-sm" style="width: 80px;" onclick="btn_edit()">
                            <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
                        </button>
                        <button type="button" class="btn btn-warning btn-sm" style="width: 80px;"
                            onclick="btn_delete()">
                            <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
                        </button>
                    </div>
                </div>
                <table id="main_table"></table>
            </div>
        </div>
    </div>
</div>

<div id="main_modal" class="modal fade">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title"></h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>

            <form id="modal_form">
                <div class="modal-body form-horizontal form-label-left">
                    <div class="form-group">
                        <label class="control-label">集群编号</label>
                        <input type="text" class="form-control" name="cluster_id" disabled value="0">
                    </div>

                    <div class="form-group">
                        <label class="control-label">集群名称</label>
                        <input type="text" class="form-control" name="cluster_name" placeholder="请数据集群名称">

                    </div>

                    <div class="form-group">
                        <label class="control-label">集群类型</label>
                        <select type="select" class="form-control"name="cluster_type" style="width: 100%">
                                <option value="PXC">PXC</option>
                                <option value="MMM">MMM</option>
                                <option value="QMHA">QMHA</option>
                            </select>

                    </div>

                    <div class="form-group">
                        <label class="control-label">集群状态</label>
                        <select class="form-control select2" style="width: 100%;" name="cluster_status">
                            <option value="0">待上线</option>
                            <option value="1">运行中</option>
                            <option value="2">维护中</option>
                            <option value="3">已下线</option>
                        </select>
                    </div>

                </div>
                <div class="modal-footer">
                    <button id="btn_modal_cancel" type="button" class="btn btn-default" data-dismiss="modal">取消
                    </button>
                    <input id="btn_modal_submit" type="button" class="btn btn-primary submit" value="提交" />
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>

    <!-- /.modal-dialog -->
</div><!-- /.modal -->

{% endblock %}

{% block script_before_body_close %}
<script src="/static/js/mysql_ops/mysql_cluster.js"></script>
{% endblock %}